<template>
  <div @click="fatherFn">
    <!-- 
      事件修饰符
      作用：给事件增加更加强大的功能
      语法：
      @ 事件名.修饰符="methods中的函数名"
      常用修饰符：
      .stop   -阻止事件冒泡
      .prevent  -阻止默认行为
      .once   -程序运行期间只触发一次事件处理函数
     -->
    <!-- 事件冒泡：当用户点击子元素的时候，同时会触发父元素的点击事件 -->
    <button @click.stop="oneFn">测试stop修饰符的</button>
    <a href="http://www.baidu.com" @click.prevent.stop="twoFn"
      >阻止跳转百度--prevent修饰符</a
    >
    <button @click.once.stop="onceFn">测试once修饰符</button>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn() {
      console.log("父元素触发了");
    },
    oneFn() {
      console.log("子元素触发了");
    },
    twoFn() {
      console.log("阻止了默认行为");
    },
    onceFn() {
      console.log("我是用来测试once修饰符的");
    },
  },
};
</script>

<style>
</style>